<script lang="ts" setup>
import type { MenuForm } from '@/api/resource/types'
import { type FormInstance, type FormRules } from 'element-plus'
import * as menu from '@/api/resource/menu'

const dialogVisible = ref(false)

const props = reactive<ModalWindowProp>({
    title: '',
    context: undefined
})

const open = async (obj: ModalWindowProp) => {
    if(obj.context) {
        formData.value =  await menu.get(obj.context)
        props.context = obj.context
    } else {
        formData.value = defaultData()
        props.context = undefined
    }

    props.title = obj.title
    dialogVisible.value = true
}

defineExpose({
    open
})

const emit = defineEmits(['close'])

const defaultData: () => MenuForm = () => ({
    name: '',
    code: '',
    parentId: '',
    route: '',
    path: '',
    icon: '',
    sort: undefined
})

const formData = ref<MenuForm>(defaultData())

const formRef = ref<FormInstance>()

const formRules = reactive<FormRules<MenuForm>>({
    name: [
        { required: true, message: '资源名称不能为空', trigger: 'blur'},
        { max: 16, message: '资源名称不能超过16个字', trigger:'blur' }
    ],
    code: [
        { required: true, message: '资源代码不能为空', trigger: 'blur'},
        { max: 32, message: '资源代码不能超过16个字', trigger:'blur' }
    ],
    sort: [
        { required: true, message: '排序不能为空', trigger: 'blur'},
        { type: 'integer', message: '排序必须为数字', trigger: 'blur'}
    ]
})

const submit = async () => {
    const valid = await formRef.value?.validate()

    if(valid) {
        let result: ApiResult
        if(props.context === undefined) {
            result = await menu.add(formData.value)
        } else {
            result = await menu.edit(props.context, formData.value)
        }
        
        if(result?.success) {
            ElMessage.success(result.message)
            dialogVisible.value = false
            emit('close')
        } else {
            ElMessage.error(result.message)
        }
    }
}


const parentTreeData = inject('resource-tree')
const parentTreeProps = {
    children: 'children',
    label: 'name'
}

</script>

<template>
    <el-dialog v-model="dialogVisible" :title="props.title" header-class="dialog-header" :close-on-click-modal="false">
        <el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px">
            <el-form-item prop="name" label="资源名称">
                <el-input v-model="formData.name"></el-input>
            </el-form-item>
            <el-form-item prop="code" label="资源代码">
                <el-input v-model="formData.code"></el-input>
            </el-form-item>
            <el-form-item prop="parentId" label="上级菜单">
                <el-tree-select v-model="formData.parentId" :data="parentTreeData" :props="parentTreeProps" node-key="id" check-strictly></el-tree-select>
            </el-form-item>
            <el-form-item prop="route" label="路由地址">
                <el-input v-model="formData.route"></el-input>
            </el-form-item>
            <el-form-item prop="path" label="视图文件">
                <el-input v-model="formData.path"></el-input>
            </el-form-item>
            <el-form-item prop="icon" label="图标">
                <el-input v-model="formData.icon"></el-input>
            </el-form-item>
            <el-form-item prop="sort" label="排序">
                <el-input v-model.number="formData.sort"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button type="primary" @click="submit">保存</el-button>
        </template>
    </el-dialog>
</template>

<style lang="scss" setup>
.dialog-header {
    text-align: left;
    margin: 0 30px 15px 30px;
}
</style>